import React,{useState,useEffect} from 'react'
import './style/createIndex.less'
import CreateActivity from './components/createActivity'
import ActivityInfo from './components/ActivityInfo'
export default function createIndex(props:any) {
    const [buttonList,setButtonList] = useState([
        {value:1,label:'基本信息'},
        {value:2,label:'活动信息'}
    ])
    const [active,setActive] = useState(1)
    const [formData,setFormData] = useState({})
    const [editData,setEditData] = useState({})
    function changeCreate(item:any,num:Number){
      setFormData({...item})
      setActive(num)
    }
    useEffect(()=>{
      if(props.location.state !== undefined){
        const editData = {
          ...props.location.state.data
        }
        setEditData(editData)
      }
     
    },[props])
  return (
    <div style={{padding:'20px'}}>
        <div className="create_header">
           {buttonList.map((el:any)=>{
               return <span key={el.value} className={active == el.value?'active':''}>{el.label}</span>
           })}
        </div>
        <div>
           {active==1?<CreateActivity formData={editData} changeCreate={changeCreate}></CreateActivity>:<ActivityInfo formData={formData} changeCreate={changeCreate}></ActivityInfo>}
        </div>
    </div>
  )
}
